<template>
<div class="center-bar progress-box">
  <div class="progress-inner" :class="{active: width !== '100%', 'error': isError}" :style="{width: width}"></div>
</div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      engine: null,
      width: '0%'
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    },
    heart: {
      type: Number,
      default: 50
    },
    threshold: {
      type: Number,
      default: 80
    },
    switch: {
      type: String,
      default: 'idle'
    },
    time: {
      type: Number,
      default: 5
    },
    isError: {
      type: Boolean,
      default: false
    }
  },
  mounted() {

  },
  methods: {
    progressing() {
      this.engine = setInterval(() => {
        let base = parseFloat(this.width.replace('%', ''))
        // 阈值控制，在没有结束前，停止在某个位置等待
        let percent
        if (base >= this.threshold && !this.end) {
          base += (8 / (this.time * this.heart))
          percent = base
        } else {
          percent = base + (100 / (this.time * this.heart))
        }
        // 加速
        if (this.value > 0) {
          percent += this.value * 8
          this.$emit('input', 0)
        }
        let wv
        if (percent >= 100) {
          wv = 100
          clearInterval(this.engine)
        } else {
          wv = percent
        }
        this.width = wv + '%'
      }, (1000 / this.heart))
    }
  },
  watch: {
    switch(val, old) {
      if (val === 'end') {
        this.width = '100%'
      } else if (val === 'idle') {
        this.width = '0%'
      } else if (val === 'start') {
        this.width = '0%'
        this.progressing()
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.progress-box {
  height: 10px;
  background-color: #ced7e0;
  .progress-inner {
    height: 10px;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-color: #2d8cf0;
    background-size: 40px 40px;
    &.active {
      animation: progress-bar-stripes 2s linear infinite;
    }
    &.error {
      background-color: #e45049;
    }
  }
}
</style>
